<template>
  <div class="cart">
    <!-- 3个快速 -->
    <div class="fjyyyds">
      <div>30天无忧退货</div>
      <div>48小时快速退款</div>
      <div>满88元免邮费</div>
    </div>
    <!-- 购物车列表 -->
    <div class="asyyds">
      <ul>
        <li v-for="item in list" :key="item.id">
          <van-swipe-cell>
            <van-checkbox class="item" v-model="item.xfqcheck">
              <img :src="item.list_pic_url" alt="" />
              <div class="box">
                <p class="title">{{ item.goods_name }}</p>
                <p class="jiage">{{ item.retail_price }}</p>
              </div>
              <!-- 数量 -->
              <div class="num">
                {{ item.number }}
              </div>
            </van-checkbox>
            <template #right>
              <van-button
                square
                @click="shanchu(item.id)"
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </li>
      </ul>
      <!-- 全选框 -->
      <div class="bsyyds">
        <van-checkbox v-model="chackbox">全选</van-checkbox>
        <div class="you">
          <div class="jiage">￥{{ total }}</div>
          <div class="xiadan" @click="dingdan">下单</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cartList, deleteAction } from "@/api/加入购物车/maimaimai.js";
import { submitAction } from "@/api/下单订单页面/dingdan.js";
import { Toast } from "vant";
export default {
  name: "Cart",
  data() {
    return {
      list: [],
      // chackbox: false,
    };
  },
  computed: {
    // 全选按钮的
    chackbox: {
      get() {
        return this.list.every((ele) => ele.xfqcheck);
      },
      set(val) {
        if (val == true) {
          this.list.forEach((ele) => (ele.xfqcheck = true));
        } else {
          this.list.forEach((ele) => (ele.xfqcheck = false));
        }
      },
    },
    // 总价格
    total() {
      return this.list.reduce((tal, ele) => {
        if (ele.xfqcheck) {
          return tal + ele.retail_price * ele.number;
        } else {
          // 如果一个都没选的话.就把默认值传出去
          return tal;
        }
      }, 0);
    },
  },
  methods: {
    // 页面总接口
    init() {
      cartList({
        params: {
          openId: localStorage.getItem("openId"),
        },
      }).then((res) => {
        console.log(res);
        // 动态添加一个属性，
        res.data.data.forEach((element) => {
          element.xfqcheck = false;
        });
        this.list = res.data.data;
      });
    },
    // 删除按钮
    shanchu(val) {
      deleteAction({
        params: {
          id: val,
        },
      }).then((res) => {
        this.init();
      });
    },
    // 提交订单
    dingdan() {
      // 1)把选中的商品筛选出来
      //var arr = this.list.filter((ele) => ele.xfqcheck);
      // 2)把选中的商品的 id 提取出来
      //console.log(arr); // 打印出选中商品
      //var arr2 = arr.map((ele) => ele.goods_id);
      // 3)提取出来的 id 是数组,将它转换成 字符串,用 ","分割
      //var str = arr2.join(",");
      // console.log(str);
      // 调用接口
      submitAction({
        allPrise: this.total,
        goodsId: this.list
          .filter((ele) => ele.xfqcheck)
          .map((ele) => ele.goods_id)
          .join(","),
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        if (res.data.data) {
          this.$router.push("/dingdan");
        } else {
          Toast.fail("失败文案");
        }
      });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.cart {
  // 3个快速
  .fjyyyds {
    height: 36px;
    width: 95%;
    margin: 0 auto 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    div {
      height: 100%;
      line-height: 36px;
      color: rgb(139, 145, 145);
    }
  }
  .asyyds {
    ul {
      padding-bottom: 100px;
      margin-bottom: 200px !important;
      list-style: none;
      width: 100%;
      li {
        padding-left: 10px;
        box-sizing: border-box;
        .item {
          flex: 1;
          width: 100%;
          height: 94px;
          margin-bottom: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: rgb(228, 222, 222);
          ::v-deep .van-checkbox__label {
            flex: 5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            img {
              flex: 1;
              width: 63px;
              height: 63px;
            }
            .box {
              flex: 3;
            }
            .num {
              flex: 1;
            }
          }
        }
        .delete-button {
          height: 100%;
        }
      }
    }
  }
  // 全选框
  .bsyyds {
    width: 100%;
    height: 50px;
    background-color: rgb(230, 224, 224);
    box-sizing: border-box;
    padding-left: 15px;
    position: fixed;
    bottom: 50px;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .you {
      display: flex;
      width: 45%;
      height: 100%;
      text-align: center;
      .jiage {
        width: 30%;
        height: 100%;
        line-height: 50px;
        font-size: 0.38667rem;
        color: red;
      }
      .xiadan {
        margin-left: 10px;
        width: 70%;
        height: 100%;
        line-height: 50px;
        font-size: 0.38667rem;
        background: #b4282d;
        color: #fff;
      }
    }
  }
}
</style>